<template>
  <van-sticky class="comFilterBar">
    <van-row type="flex" justify="space-between" align="center" class="content_bar">
      <van-col span="20">
        <van-dropdown-menu>
          <!-- 标题若不指定，则组件自动匹配 -->
          <van-dropdown-item
            v-for="(item, index) in dropdownMenuList"
            :title="item.initModeValue ? '' : item.title"
            v-model="item.initModeValue"
            :options="item.options"
            :key="index"
            @change="changFilterVal(item, index)"
          ></van-dropdown-item>
        </van-dropdown-menu>
      </van-col>
      <van-col span="4" class="others_bar" :style="{backgroundColor: (isDoFilter ? '#399BF5' : '')}">
        <div class="filter_title" @click="dealClickFilter">
          <span>筛选</span>
          <van-icon name="filter-o" size="20" />
        </div>
      </van-col>
    </van-row>
  </van-sticky>
</template>

<script>
import {sortCompanyLists, nearCompanyLists, salaryCompanyLists} from '../api/myCompany.js'
import {allCompanyLists, getcollectLists} from '../api/myCompany'
import {Dialog} from 'vant';
// 默认设置(缺省地址: 深圳市龙华区富士康科技集团龙华科技园)
import {LAT, LNG, CITY_ID, CITY_NAME} from '../constants/location';
import constant from "../utils/constant";

const orderObj = {
  order_1: '招聘分',
  order_2: '信用分',
  order_3: '关注'
}
const salaryObj = {
  salary_1: '0-2000',
  salary_2: '2000-4000',
  salary_3: '4000-6000',
  salary_4: '6000-8000',
  salary_5: '9000-10000',
  salary_6: '10000-0'
};

const nearbyObj = {
  1: '上班地址',
  2: '面试地址',
  3: '招企地址'
};



export default {
  name: 'comFilterBar',
  props: ['isDoFilter'],
  data() {

    // 必须写在此处, 用于更新子组件中的data数据
    const cityName = localStorage.getItem(constant.STORAGE_CURRENT_ADDRESS_VALUE)
      ? localStorage.getItem(constant.STORAGE_CURRENT_ADDRESS_VALUE)
      : `${CITY_NAME}(默认)`;

    const menuArr = [
        {
          id: '0',
          // 默认值
          initModeValue: '',
          title: '找工作',
          options: [
            {text: '全部（不限）', value: ''},
            {text: '找全职', value: '1'},
            {text: '找兼职', value: '2'},
            {text: '找小时工', value: '3'},
            // {text: '找日结', value: '4'},
          ]
        },
        {
          id: '1',
          initModeValue: '',
          title: '薪资',
          options: [
            {text: '全部（不限）', value: ''},
            {text: '2000以下', value: 'salary_1'},
            {text: '2000-4000', value: 'salary_2'},
            {text: '4000-6000', value: 'salary_3'},
            {text: '6000-8000', value: 'salary_4'},
            {text: '9000-10000', value: 'salary_5'},
            {text: '10000以上', value: 'salary_6'}
          ]
        },
        {
          id: '2',
          initModeValue: '',
          title: '地址',
          options: [
            {text: `全部地址【${cityName}全部的招聘信息】`, value: ''},
            {text: `上班地址【${cityName}上班的招聘信息】`, value: '1'},
            {text: `面试地址【${cityName}面试的招聘信息】`, value: '2'},
            {text: `招企地址【${cityName}招企的招聘信息】`, value: '3'}
          ],
          notShowOtherPage: true
        },
        // 第一版不做, 隐藏
        /*{
          id: '3',
          // 默认值
          initModeValue: '',
          title: '排序',
          options: [
            {text: '全部（不限）', value: ''},
            /!*{text: '招聘分', value: 'hire_score'},
            {text: '信用分', value: 'credit_score'},*!/
            {text: '关注', value: 'concern'}
          ]
        },*/
      ];

    const isHomePath = this.$route.name === 'home';


    const dropdownMenuArr = isHomePath ? menuArr : menuArr.filter(item => !item.notShowOtherPage);

    // console.log('下拉菜单', dropdownMenuArr)

    return {
      // 写在这里，可以避免公共组件的状态互相影响
      dropdownMenuList: dropdownMenuArr
    }
  },

  methods: {
    changFilterVal(value){
      const filterValObj = {
        jobcategoryId: this.dropdownMenuList[0].initModeValue,
        salary: this.dropdownMenuList[1].initModeValue ? (salaryObj[this.dropdownMenuList[1].initModeValue]).split('-') : '',
        addressType: this.dropdownMenuList.some(item => item.title === '地址') ? this.dropdownMenuList[2].initModeValue : '',
        // order: this.dropdownMenuList[3].initModeValue,
      };

      const needParamsObj = {
        // 工作类型
        jobcategory: filterValObj.jobcategoryId,
        // 最小工资
        minSalary: filterValObj.salary ? filterValObj.salary[0]*1 : '',
        // 最大工资
        maxSalary: filterValObj.salary ? filterValObj.salary[1]*1 : '',
        // 按照地址
        adrtype: filterValObj.addressType,
        // 数据变化请求第一页
        pageIndex: 1,
        // 第一版不做, 隐藏
        // order: filterValObj.order,
      };
      // console.log('筛选条', needParamsObj);
      this.$emit('getFilterBarVal', needParamsObj)
    },

    dealClickFilter() {
      this.$emit('clickFilter')
    },

    /*changFilterVal(value, index) {
      // this.$toast.loading({
      //   message: '加载中...',
      //   forbidClick: true, // 禁止背景点击
      //   duration: 0 // 持续展示
      // })
      if (index == 0) this.serchOrderItem(value.initModeValue)
      if (index == 1) this.salaryOrderItem(value.initModeValue)
      if (index == 2) this.nearCompanyLists(value.initModeValue)

      // 招聘分查询
      // const filterValObj = {
      //   order: this.dropdownMenuList[0].initModeValue,
      //   salary: this.dropdownMenuList[1].initModeValue,
      //   nearby: this.dropdownMenuList[2].initModeValue,
      // };
      // this.$emit('getFilterBarVal', filterValObj)
    },
    async serchOrderItem(value) {
      let id = this.$route.query.id
      if (value == 'order_3') {
        let allCertificate = window.localStorage.getItem('allCertificate')
        if (allCertificate) {
          let res = await getcollectLists(id)
          if (res.code == 200) {
            this.$emit('getTreeData', res.data.items)
          }
        } else {
          this.$store.dispatch('logOut')
          Dialog.confirm({
            message: '此功能需要注册登入才能使用，为您跳转到注册登入页面。'
          })
            .then(() => {
              this.$router.push({
                path: '/login'
              })
            })
            .catch(() => {
              // on cancel
            })
        }
      } else {
        let res = await sortCompanyLists(value)
        if (res.code == 200) {
          this.$emit('getTreeData', res.data.items)
        }
      }
    },
    async salaryOrderItem(value) {
      let maxsalary, minsalary
      switch (value) {
        case 'salary_0':
          minsalary = ''
          maxsalary = ''
          break
        case 'salary_1':
          minsalary = '0'
          maxsalary = '2000'
          break
        case 'salary_2':
          minsalary = '2000'
          maxsalary = '4000'
          break
        case 'salary_3':
          minsalary = '4000'
          maxsalary = '6000'
          break
        case 'salary_4':
          minsalary = '6000'
          maxsalary = '8000'
          break
        case 'salary_5':
          minsalary = '9000'
          maxsalary = '10000'
          break
        default:
          minsalary = '10000'
          maxsalary = ''
          break
      }
      let params = {
        minsalary: minsalary,
        maxsalary: maxsalary
      }
      if (minsalary === '' && maxsalary === '') {
        // eslint-disable-next-line no-undef
        let res = await allCompanyLists()
        if (res.code == 200) {
          this.$emit('getTreeData', res.data.items)
        }
      } else {
        let res = await salaryCompanyLists(params)
        if (res.code == 200) {
          this.$emit('getTreeData', res.data.items)
        }
      }
    },
    nearCompanyLists(value) {
      // const res = await nearCompanyLists(value)
      // if (res.code == 200) {
      //   this.$emit('getTreeData', res.data.items)
      // }
      this.$emit('searchByLocation', value)
    },*/
  },

}
</script>

<style lang="scss" scoped>
.comFilterBar {
  height: 1.33rem !important;
  .content_bar {
    border-bottom: 0.3px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    .others_bar {
      height: 1.28rem;
      background-color: #ffffff;
      font-size: 0.4rem;
      color: #323233;
      font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      padding: 2px;
      .filter_title {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        span {
          margin-right: 1px;
          padding-bottom: 2px;
        }
      }
    }
  }
  /* 使用透传修改组件的默认样式  */
  /deep/ .van-dropdown-menu__bar {
    box-shadow: none;
  }
  /deep/.van-dropdown-menu__item {
    border-right: 1px solid #ebe5e5;
  }
  /deep/.van-dropdown-menu__title{
    font-size: 0.4rem;
  }

  /deep/.van-dropdown-item__content {
    max-height: 68%;
  }
}


</style>
